<!--
 * @Author: your name
 * @Date: 2021-08-26 18:49:45
 * @LastEditTime: 2021-08-28 18:14:23
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue_study\src\views\order\Order.vue
-->
<template>
  <div class="order">
    <nav-bar>
      <template v-slot:center> 订单预览 </template>
    </nav-bar>

    <van-tabs ref="tabs" @click="onChangeTab" class="order-tab">
      <van-tab title="全部"></van-tab>
      <van-tab title="待付款"></van-tab>
      <van-tab title="已支付"></van-tab>
      <van-tab title="发货中"></van-tab>
      <van-tab title="交易完成"></van-tab>
      <van-tab title="过期"></van-tab>
    </van-tabs>
    <div class="content">
      <van-pull-refresh
        v-model="refreshing"
        @refresh="onRefresh"
        class="order-list-refresh"
      >
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          @offset="10"
        >
          <div
            class="order-item-box"
            v-for="(item, index) in list"
            :key="index"
          >
            <div
              @click="goTo(item.id)"
              class="order-item-header"
              style="padding: 5px"
            >
              <span style="line-height: 30px"
                >订单号：{{ item.order_no }} <br />创建时间：{{
                  item.created_at
                }}</span
              >
            </div>
            <van-card
              v-for="sub in item.orderDetails.data"
              :key="sub.id"
              :num="sub.num"
              :price="sub.price + '.00'"
              :desc="sub.goods.description"
              :title="sub.goods.title"
              :thumb="sub.goods.cover_url"
            />
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import { ref, reactive, torefs, onMounted, computed, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import { Dialog, Toast } from "vant";
import { getOrderList } from "network/order";
import NavBar from "components/common/navbar/NavBar";
export default {
  components: { NavBar },
  name: "Order",
  setup() {
    const router = useRouter();
    const route = useRoute();
    const store = useStore();

    const tabs = ref();

    const state = reactive({
      loading: false,
      finished: false,
      refreshing: false,
      list: [],
      page: 1,
      totalPage: 0,
      status: 0,
    });

    onMounted(() => {
      onRefresh(); //初始化
    });

    const loadData = () => {
      getOrderList({
        page: state.page,
        status: state.status,
        include: "orderDetails.goods",
      }).then((res) => {
        state.list = state.list.concat(res.data);
        state.loading = false;

        // console.log(state.page);

        state.totalPage = res.meta.pagination.total_pages;

        if (state.page >= state.totalPage) {
          state.finished = true;
        }

        // console.log(state.totalPage);
      });
    };

    const onLoad = () => {
        if(!state.refreshing && state.page<state.totalPage){
            state.page=state.page+1
        }

      if (state.refreshing) {
        state.list = [];
        state.refreshing = false;
      }

      loadData();
    };

    const onRefresh = () => {
      //是否处于加载状态，加载状态不触发Load事件
      state.refreshing = true;
      //清空列表数据
      state.finished = false;
      //从新加载数据
      //表示加载状态
      state.loading = true;

      state.page = 1;

      onLoad();
    };

    //tab切换
    const onChangeTab = (name) => {
      state.status = name;
      onRefresh();
    };

    //到订单详情页
    const goTo = (id) => {
      router.push({ path: "/orderdetail", query: { id } });
    };

    return {
      ...toRefs(state),
      onLoad,
      onRefresh,
      tabs,
      onChangeTab,
      goTo,
    };
  },
};
</script>

<style scoped lang='scss'>
.order {
  text-align: left;
  background-color: #f7f7f7;
  .order-tab {
    margin-top: 45px;
  }
}
</style>